<template>
  <div class="header-nav">
    <div class="position-you">
      <a href="javascropt:#">定位</a>
      <van-icon name="arrow-down" size="10"/>
    </div>
    <input  class="middle-search" type="value" placeholder="请输入商家名、品类或者商圈...">
    <div class="my-center">
      <!-- <a href="javascropt:#"> -->
        <van-icon name="contact" size="25"/>
      <!-- </a> -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar,Toast,Icon } from 'vant';

Vue.use(NavBar);
Vue.use(Toast);
Vue.use(Icon);

export default {
  data() {
    return {
    };
  },
  methods: {
  },
};
</script>

<style lang='scss' scoped>
.header-nav{
  font-size: 13px;
  width: 100%;
  position: fixed;
  top: 0;
  height: 50px;
  background: #FFBD00;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index:1000;
}

.header-nav .middle-search{

  width: 60%;
  border-radius: 15px;
  padding: 10px;
}
</style>
